<template>
  <div class="bot-tabs w100">
    <el-segmented  id="tabs" v-model="activeName" :options="options" @change="handleClick"/>
    <MoreFilter
      class="fileter"
      v-if="activeName === 'now'"
      :conditionFold="conditionFold"
      :formDataConfig="formDataConfig"
      @areConditionFold="areConditionFold"
      @onSubmit="onSubmit"
      @resetForm="resetForm"></MoreFilter>
    <now_order  v-if="activeName === 'now'" :seach="seach" :style="{paddingTop: conditionFold ? '192px' : '406px'}"></now_order>
    <div v-if="activeName === 'past'" class=" tips_box">
      <div class="tips">
        温馨提示：历史订单默认查询一个月充电订单数据，需要查看其他数据请使用查询功能。
      </div>
      <div class="pt-20">
        <MoreFilter
          class="fileter1"
          v-if="activeName === 'past'"
          :conditionFold="conditionFold"
          :formDataConfig="formDataConfig1"
          @areConditionFold="areConditionFold"
          @onSubmit="onSubmit1"
          @resetForm="resetForm1"></MoreFilter>
      </div>
      
    </div>
    <past_order v-if="activeName === 'past'" :seach="seach1" :style="{paddingTop: conditionFold ? '260px' : '534px'}"></past_order>

    <!-- <el-tabs v-model="activeName" class="bot-tabs" @tab-click="handleClick">
    <el-tab-pane label="实时订单" name="now">
      <now_order></now_order>
    </el-tab-pane>
    <el-tab-pane label="历史订单" name="past">历史订单</el-tab-pane>
    <el-tab-pane label="异常订单" name="error">异常订单</el-tab-pane>
  </el-tabs> -->
  </div>
</template>

<script setup>
import { get } from "@vueuse/core";
import now_order from "../components/nowOrder.vue";
import past_order from "../components/pastOrder.vue";
import { chargeChargeType, chargeOperatorType, chargeOrderType, chargeTradeType, chargeChargeMode, chargeVehicleModel, chargeElectricPower, chargePurchasingCompany} from "@/api/modules/powerStation";

const options = ref([
  { label: '实时订单', value: 'now' },
  { label: '历史订单', value: 'past' },
  { label: '异常订单', value: 'error' },
])
const activeName = ref('now')
const handleClick = (val) => {
  activeName.value = val
}
const conditionFold = ref(true);

const formDataConfig = ref([
  {
    label: "查询时间",
    key: "times",
    type: "daterange",
    placeholder: "请输入查询时间",
    value:'',
  },
  {
    label: "充电单号",
    key: "orderNo",
    type: "input",
    placeholder: "请输入订单号",
    value:'',
  },
  {
    label: "充电方式",
    key: "type",
    type: "select",
    placeholder: "请输入充电方式",
    value:'',
  },
  {
    label: "用户账号",
    key: "userNumber",
    type: "input",
    placeholder: "请输入用户账号",
    value:'',
  },
  {
    label: "用户昵称",
    key: "userName",
    type: "input",
    placeholder: "请输入用户昵称",
    value:'',
  },
  {
    label: "归属机构",
    key: "company",
    type: "input",
    placeholder: "请输入归属机构",
    value:'',
  },
  {
    label: "充电车辆",
    key: "car",
    type: "input",
    placeholder: "请输入充电车辆",
    value:'',
  },
  {
    label: "电站名称",
    key: "powerName",
    type: "input",
    placeholder: "请输入电站名称",
    value:'',
  },
  {
    label: "终端名称",
    key: "terminalName",
    type: "input",
    placeholder: "请输入终端名称",
    value:'',
  },
  {
    label: "运营商",
    key: "operator",
    type: "input",
    placeholder: "请输入运营商",
    value:'',
  },
  {
    label: "运营商属性",
    key: "operatorType",
    type: "select",
    placeholder: "请输入运营商",
    value:'',
  }, 
  {
    label: "订单类型",
    key: "oderType",
    type: "select",
    placeholder: "请输入订单类型",
    value:'',
  }, 
  {
    label: "交易类型",
    key: "transactionType",
    type: "select",
    placeholder: "请输入交易类型",
    value:'',
  }, 
  {
    label: "充电模式",
    key: "chargeType",
    type: "select",
    placeholder: "请输入充电模式",
    value:'',
  },

]);

const formDataConfig1 = ref([
{
    label: "查询时间",
    key: "times",
    type: "daterange",
    placeholder: "请输入查询时间",
    value:'',
  },
  {
    label: "充电单号",
    key: "orderNo",
    type: "input",
    placeholder: "请输入订单号",
    value:'',
  },
  {
    label: "充电方式",
    key: "type",
    type: "select",
    placeholder: "请输入充电方式",
    value:'',
  },
  {
    label: "用户账号",
    key: "userNumber",
    type: "input",
    placeholder: "请输入用户账号",
    value:'',
  },
  {
    label: "用户昵称",
    key: "userName",
    type: "input",
    placeholder: "请输入用户昵称",
    value:'',
  },
  {
    label: "归属机构",
    key: "company",
    type: "input",
    placeholder: "请输入归属机构",
    value:'',
  },
  {
    label: "充电车辆",
    key: "car",
    type: "input",
    placeholder: "请输入充电车辆",
    value:'',
  },
  {
    label: "电站名称",
    key: "powerName",
    type: "input",
    placeholder: "请输入电站名称",
    value:'',
  },
  {
    label: "终端名称",
    key: "terminalName",
    type: "input",
    placeholder: "请输入终端名称",
    value:'',
  },
  {
    label: "运营商",
    key: "operator",
    type: "input",
    placeholder: "请输入运营商",
    value:'',
  },
  {
    label: "运营商属性",
    key: "operatorType",
    type: "select",
    placeholder: "请输入运营商",
    value:'',
  }, 
  {
    label: "订单类型",
    key: "oderType",
    type: "select",
    placeholder: "请输入订单类型",
    value:'',
  }, 
  {
    label: "交易类型",
    key: "transactionType",
    type: "select",
    placeholder: "请输入交易类型",
    value:'',
  }, 
  {
    label: "充电模式",
    key: "chargeType",
    type: "select",
    placeholder: "请输入充电模式",
    value:'',
  },
  {
    label: "VIN码",
    key: "vin",
    type: "input",
    placeholder: "请输入车辆VIN码",
    value:'',
  },
  {
    label: "车辆型号",
    key: "car_type",
    type: "select",
    placeholder: "请选择车辆型号",
    value:'',
  },
  {
    label: "电桩功率",
    key: "power",
    type: "cascader",
    placeholder: "请选择电桩功率",
    value:'',
  },
  {
    label: "采购公司",
    key: "chargeType",
    type: "select",
    placeholder: "请选择采购公司",
    value:'',
  },
]);

	// 获取当月的1号-今天
  const getNowDate = () => {
    let nowDate = new Date();
			let year = nowDate.getFullYear();
			let month = String(nowDate.getMonth() + 1).padStart(2, "0");
			let date = String(nowDate.getDate()).padStart(2, "0");
			let dateArrS = year + "-" + month + "-" + '01';
			let dateArr = year + "-" + month + "-" + date;
      formDataConfig.value[0].value = [dateArrS,dateArr]
      formDataConfig1.value[0].value = [dateArrS,dateArr]
};
// 切換
const areConditionFold = (val) => {
  val =! val
  conditionFold.value = val
}
const seach = ref({})
const seach1 = ref({})
// 筛选
const onSubmit = (val) => {
  let params = {}
  val.forEach( (item) => {
    if(item.value !== ''){
      params = {
        ...params,
        [item.key]:item.value
      }
    seach.value = params
    }
  })
}
const onSubmit1 = (val) => {
  let params = {}
  val.forEach( (item) => {
    if(item.value !== ''){
      params = {
        ...params,
        [item.key]:item.value
      }
    seach1.value = params
    }
  })
}
// 重置
const resetForm = (val) => {
  getNowDate();
  let params = {}
    val.forEach( (item) => {
      if(item.key == 'times'){
        params = {
          [item.key]:item.value
        }
      }else{
        item.value = ''
      }
  })
  seach.value = params
};
const resetForm1 = (val) => {
  getNowDate();
  let params = {}
    val.forEach( (item) => {
      if(item.key == 'times'){
        params = {
          [item.key]:item.value
        }
      }else{
        item.value = ''
      }
  })
  seach1.value = params
};
const getchargeChargeType = async () => {
  const res = await chargeChargeType();
  formDataConfig.value[2].options = res.data;
  formDataConfig1.value[2].options = res.data;
};
const getchargeOperatorType = async () => {
  const res = await chargeOperatorType();
  formDataConfig.value[10].options = res.data;
  formDataConfig1.value[10].options = res.data;
};
const getchargeOrderType = async () => {
  const res = await chargeOrderType();
  formDataConfig.value[11].options = res.data;
  formDataConfig1.value[11].options = res.data;
}
const getchargeTradeType = async () => {
  const res = await chargeTradeType();
  formDataConfig.value[12].options = res.data;
  formDataConfig1.value[12].options = res.data;
}
const getchargeChargeMode = async () => {
  const res = await chargeChargeMode();
  formDataConfig.value[13].options = res.data;
  formDataConfig1.value[13].options = res.data;
}
const getVehicleModel = async () => {
  const res = await chargeVehicleModel();
  formDataConfig1.value[15].options = res.data;
}
const getElectricPower = async () => {
  const res = await chargeElectricPower();
  formDataConfig1.value[16].options = res.data;
}
const getPurchasingCompany = async () => {
  const res = await chargePurchasingCompany();
  formDataConfig1.value[17].options = res.data;
}
onMounted(() => {
  getNowDate();
  // 获取筛选的下拉框内容
  getchargeChargeType();
  getchargeOperatorType();
  getchargeOrderType();
  getchargeTradeType();
  getchargeChargeMode();
  getVehicleModel();
  getElectricPower();
  getPurchasingCompany();
});
</script>

<style lang="scss" scoped>
.bot-tabs .el-segmented {
  margin-top: 50px;
  position: fixed;
  --el-segmented-item-selected-color: #333;
  --el-segmented-item-selected-bg-color: #F7FAFF;
  --el-segmented-item-hover-bg-color:#F7FAFF;
  --el-segmented-item-selected-bg-color: #F7FAFF;
  --el-segmented-item-active-bg-color:#F7FAFF;
  text-align: left;
  background-color: #F7FAFF;
}
:deep(#tabs .el-segmented__item-label){
  font-size: 16px;
}
:deep(#tabs .el-segmented__item){
  padding: 0px 0px 0px 0px;
  margin-right: 20px;
}
:deep(#tabs .el-segmented__item.is-selected){
  color: var(--el-color-primary);
}
:deep(#tabs .el-segmented__item:hover){
  color: var(--el-color-primary);
}
.fileter{
  position: fixed;
  margin-top: 100px;
  right: 50px;
  left: 300px;
}
.fileter1{
  position: fixed;
  right: 50px;
  left: 300px;
}
.tips_box{
  position: fixed;
  right: 50px;
  left: 300px;
  background-color: #F7FAFF;
  margin-top: 100px;
}
.tips{
  background: #FCF9F5;
  border-radius: 4px;
  padding: 13px 20px;
  color: #EF001E;
  font-size: 14px;
}
// :deep(.bot-tabs .el-tabs__item.is-active){
//   color: #F56D1C;
// }
// :deep(.bot-tabs .el-tabs__item){
//   font-size: 16px;
//   color: #7E7E7E;
// }
// :deep(.bot-tabs .el-tabs__nav-wrap::after){
//   background-color: rgba(255,255,255,0);
// }
// :deep(.bot-tabs .el-tabs__active-bar){
//   background-color: rgba(255,255,255,0);
// }

</style>
